<template>
  <div class="youke">
    <van-nav-bar
      :title="$route.query.status | getTitle($route.query.act)"
      left-arrow
      fixed
      @click-left="onBack(`/order/index`)"
    >
      <template
        slot="right"
        v-if="['0','1'].includes($route.query.act)"
      >
        <div
          class="cancel"
          @click="cancelFun"
        >撤销</div>
      </template>
    </van-nav-bar>
    <Main v-if="ret.mobile">
      <order-detail
        :avatar="ret.avatar"
        :mobile="ret.mobile"
        :type="ret.type"
        :nickname="ret.nickname"
        :type-txt="ret.typeTxt"
        :price="ret.price"
        :amount="ret.amount"
        :handling-fee="ret.handlingFee"
        :payment="ret.payment"
        :time="ret.time"
      ></order-detail>

      <template v-if="['2','3'].includes($route.query.act)">
        <div class="options">
          <template v-if="$route.query.status==3">
            <van-cell-group>
              <van-cell
                title="支付宝"
                is-link
                @click="showImg(ret.zfb,'zfb')"
                :value="ret.zfb==0?'未上传':'查看'"
              />
              <van-cell
                title="微信"
                is-link
                @click="showImg(ret.wx,'wx')"
                :value="ret.wx==0?'未上传':'查看'"
              />
              <van-cell
                title="银行卡"
                is-link
                @click="showImg(ret.yhk,'yhk')"
                :value="ret.yhk==0?'未上传':'查看'"
              />
            </van-cell-group>
          </template>
          <template v-if="ret.type==5">
            <van-cell-group>
              <!-- <van-cell title="支付方式" :value="ret.pay_type" class="pay_time"/> -->
              <van-cell
                title="支付时间"
                :value="ret.pay_time|getpayType(ret.dktype)"
                class="pay_time"
              />
               <van-cell
                title="收货地址"
                :value="ret.add"
                class="pay_time"
              />
            </van-cell-group>
          </template>
        </div>
        <div class="options">
          <van-cell-group>
            <!-- 自行判断展示哪一个 -->
            <van-cell
              title="打款截图"
              is-link
              :value="ret.dkjt==1?'点击查看':'未上传'"
              @click="makePlan(ret.dkjt)"
            />
          </van-cell-group>
        </div>
        <div
          class="options"
          v-if="ret.type!=5"
        >
          <van-cell-group>
            <van-cell
              title="我要申诉"
              is-link
              :value="ret.ssjl==0?'':'查看详情'"
              @click="ssjlfun(ret.ssjl)"
            />
          </van-cell-group>
        </div>
        <div
          class="options"
          v-if="ret.type==3"
        >
          <div
            class="savebtn"
            @click="receiptfun"
          >确认收款</div>
        </div>
      </template>
      <van-dialog
        v-model="show"
        :showConfirmButton="false"
        :closeOnClickOverlay="true"
      >
        <img :src="ret.payment_img">
      </van-dialog>

    </Main>
  </div>
</template>

<script>
import orderDetail from "@/components/common/orderDetail";
import { Dialog } from "vant";
import { trads, user } from "@/api";
//模拟数据
// let arr={
//     result:{
//     "did": "10",
//     "cid": "1",
//     "name": "张三",
//     "image": "",
//     "mobile": "15200311901",
//     "je": "30",
//     "jf": "30",
//     "time": "2019-05-20 11:01:48",
//     "type": 5,
//     "remark": "请付款",
//     "dktype": "0",
//     "dkjt": 0,
//     "dktime": false,
//     "wx": 0,
//     "zfb": 0,
//     "yhk": 0,
//     "ssjl": 1
// }
// }

export default {
  data() {
    return {
      show: false,
      ret: {
        avatar: "",
        nickname: "",
        type: 4,
        typeTxt: "",
        mobile: "",
        countdown: 0,
        price: 0.0,
        amount: 0,
        handlingFee: 0,
        payment: 0,
        time: "",
        pay_type: "",
        pay_time: "",
        payment_img: "",
        wx: 0, //对方微信
        zfb: 0, //对方支付宝
        yhk: 0, //对方银行卡
        dktype: "0", //支付类型
        ssjl: 0, //申诉
        dkjt: 0, //打款截图
        did: "",
        cid: "",
        add:''
      },
      cancelcheck: true
    };
  },
  components: { orderDetail },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      let act = this.$route.query.act;
      if (act == 0 || act == 1) {
        // console.log('orderDetail');
        trads.orderDetail({ did: this.$route.query.id }).then(res => {
          if (res.code == 1000) {
            let datas = res.result;
            //  let datas = arr.result;
            this.ret.avatar = datas.image;
            this.ret.nickname = datas.cname;
            this.ret.mobile = datas.mobile;
            this.ret.price = datas.dj;
            this.ret.amount = datas.jfs;
            this.ret.payment = datas.dj * datas.jfs;
            this.ret.time = datas.time;
            this.ret.typeTxt = datas.remark;
            this.ret.dkjt = datas.dkjt;
            // this.ret.type = datas.type;
            this.ret.pay_time = datas.dktime;
            this.ret.wx = datas.wx;
            this.ret.zfb = datas.zfb;
            this.ret.yhk = datas.yhk;
            this.ret.dktype = datas.dktype;
            this.ret.ssjl = datas.ssjl;
            this.ret.did = datas.id;
          }
        });
      } else {
        trads.orderDetailTwo({ did: this.$route.query.id }).then(res => {
          if (res.code == 1000) {
            let datas = res.result;
            //  let datas = arr.result;
            this.ret.avatar = datas.image;
            this.ret.nickname = datas.name;
            this.ret.mobile = datas.mobile;
            this.ret.price = datas.je;
            this.ret.amount = datas.jf;
            this.ret.payment = datas.je * datas.jf;
            this.ret.time = datas.time;
            this.ret.typeTxt = datas.remark;
            this.ret.dkjt = datas.dkjt;
            this.ret.type = datas.type;
            this.ret.pay_time = datas.dktime;
            this.ret.wx = datas.wx;
            this.ret.zfb = datas.zfb;
            this.ret.yhk = datas.yhk;
            this.ret.dktype = datas.dktype;
            this.ret.ssjl = datas.ssjl;
            this.ret.did = datas.id;
            this.ret.cid = datas.cid;
            this.ret.add=datas.add
          }
        });
      }
    },
    //确认收款
    receiptfun() {
      trads.receipt({ id: this.$route.query.id }).then(res => {
        if (res.code == 1000) {
          this.getlist();
          this.$toast.success(res.reason);
          this.$store.dispatch("addzhichan");
        }
      });
    },
    //撤销
    cancelFun() {
      if (!this.cancelcheck) {
        this.$toast.fail("点击太频繁了");
        return false;
      }
      this.cancelcheck = false;
      trads.orderCancel({ did: this.ret.did }).then(res => {
        if (res.code == 1000) {
          // this.getlist();
          this.$toast.success(res.reason);
          setTimeout(() => {
            this.$router.go(-1);
          }, 300);
          this.$store.dispatch("addzhichan");
        } else {
          this.cancelcheck = true;
        }
      });
    },
    showImg(f, text) {
      if (f == 1) {
        switch (text) {
          case "wx":
            this.show = true;
            user.bindpay({ type: 1, cid: this.ret.cid }).then(res => {
              if (res.code == 1000) {
                this.ret.payment_img = res.result;
              }
            });
            break;
          case "zfb":
            this.show = true;
            user.bindpay({ type: 2, cid: this.ret.cid }).then(res => {
              if (res.code == 1000) {
                this.ret.payment_img = res.result;
              }
            });
            break;
          case "yhk":
            this.$router.push(`/order/bankCard?cid=${this.ret.cid}`);
            break;
          default:
            break;
        }
      }
    },
    makePlan() {
      if (![4,6].includes(this.ret.type)) {
        if (this.ret.dkjt == 1) {
          this.show = true;
          trads.lookdkjt({ did: this.$route.query.id }).then(res => {
            if (res.code == 1000) {
              this.ret.payment_img = res.result;
            }
          });
        } else {
          this.$router.push(
            `/order/makeplan?id=${this.$route.query.id}&pay=0&status=${
              this.$route.query.status
            }&act=${this.$route.query.act}`
          );
        }
      }
    },
    ssjlfun(f, to) {
      let querys = this.$route.query;
      if (f == 0) {
        this.$router.push(
          `/order/appeal?id=${querys.id}&status=${querys.status}&act=${
            querys.act
          }`
        );
      } else {
        this.$router.push(
          `/order/appealdetail?id=${querys.id}&status=${querys.status}&act=${
            querys.act
          }`
        );
      }
    }
  },
  filters: {
    getTitle(value, act) {
      if (["0", "1"].includes(act)) {
        let msg = ["挂卖详情", "挂买详情"];
        console.log(1);
        return msg[act];
      } else {
        let msg = ["", "挂卖详情", "挂买详情", "买入详情", "卖出详情"];
        return msg[value];
      }
    },
    getpayType(value, type) {
      let msg = ["", "微信支付", "支付宝支付", "银行卡支付"];
      return `${msg[Number(type)]} ${value}`;
    }
  },
  mounted() {}
};
</script>

<style scoped lang="less">
.options {
  margin: 0.5rem auto;

  .rows {
    border: 1px solid red;
    width: 94%;
  }

  .savebtn {
    width: 94%;
    height: 2.625rem;
    background: #3377fe;
    margin: 1rem auto 0;
    border-radius: 4px;
    text-align: center;
    line-height: 2.625rem;
    color: #fff;
  }
}

.van-dialog {
  border: 1px solid red;
  width: 90%;

  img {
    width: 100%;
  }
}

.cancel {
  font-size: 16px;
}
.pay_time {
  .van-cell__value {
    flex: 2;
  }
}
</style>
